<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<body>
<div id="map">
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-title" class="popup-title"></div>
        <div id="popup-content" class="popup-content"></div>
    </div>
</div>
<script src="js/lib/ol4.6.4/ol.js"></script>
<script src="js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
    var view = new ol.View({
        zoom: 4,
        center:ol.proj.transform([110, 39],"EPSG:4326", "EPSG:3857")
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map",
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view: view
    });

    var vectorSource = new ol.source.Vector({
        features:[]
    });
    var vector = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
    });
    map.addLayer(vector);

    var container = $("#popup"),
        close = $("#popup-closer"),
        title = $("#popup-title"),
        content = $("#popup-content");

    var overlay = new ol.Overlay({
        element: container[0],
        positioning:"bottom-center",
        autoPan:true,
        autoPanMargin:100
    });
    map.addOverlay(overlay);

    map.on("click", function(evt){
        var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
            evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
        var content = '<p>你点击的位置是:</p><code>' + hdms +'</code>';
        showInfo(evt.coordinate, content);
        var feature = new ol.Feature({
            geometry: new ol.geom.Point(evt.coordinate)
        });
        vectorSource.clear();
        vectorSource.addFeature(feature);
    });

    function showInfo(coordinate, info){
        title.html("提示信息");
        content.html("").append(info);
        title.show();
        container.show();
        overlay.setPosition(coordinate);
    }

    close.on("click", function () {
        container.hide();
    });

    function styleFunction(feature) {
        return new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: "#f00"
                })
            })
        });
    }

    function getTdtLayer(lyr){
        var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url:url
            })
        });
        return layer;
    }
</script>
</body>
</html>